<template>
  <div :class="ns.b()">
    <div class="content-wrapper" v-spin="loading">
      <div class="container" v-if="showTable">
        <div class="name">
          <span class="bondName">{{ data.bondName }}</span>
          <span
            v-for="(litem, index) in data.labels"
            :key="index"
            :style="{ background: litem.bgColor, color: litem.color }"
            class="label"
          >{{ litem.name }}</span
          >
          <span class="label outdate" v-if="data.expired">已到期</span>
        </div>
        <div class="section">
          <div class="title">债券基本信息</div>
          <descriptions v-if="showTable" class="pollution-discharge-permits-desc" :item="data"
                        :infos="infos"/>
        </div>
        <div class="section section2"
             v-if="data.projectFundRateList && data.projectFundRateList.length > 0">
          <div class="title">募集资金投向</div>
          <div class="main">
            <div ref="chartRef" class="chart"></div>
            <div class="dataDesc">
              <div
                v-for="(item, index) in data.projectFundRateList"
                :key="index"
                class="dataDescItem"
              >
                <div class="label">{{ item.projectName }}</div>
                <div class="value">{{ item.rate }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="section section3"
             v-if="data.greenBondProjects && data.greenBondProjects.length > 0">
          <div class="title">投资项目</div>
          <div class="detailItem">
            <div class="investmentList">
              <div
                class="investmentListItem"
                v-for="(item, index) in greenBondProjectShow"
                :key="index"
              >
                <div class="name" @click="toProjectDetail(item.greenProjectId)">
                  <div class="value">{{ item.projectName || "-" }}</div>
                  <div class="right"></div>
                </div>
                <div class="flex">
                  <div class="label">拟使用募集资金</div>
                  <div class="value">
                    {{
                      item.amountForProjectDisPlay
                        ? item.amountForProjectDisPlay + "亿"
                        : "-"
                    }}
                  </div>
                </div>
                <div class="flex">
                  <div class="label">占本期债券募集资金比例</div>
                  <div class="value">{{ item.rate || "-" }}</div>
                </div>
                <div class="flex">
                  <div class="label">项目资本金</div>
                  <div class="value">
                    {{ item.projectCapitalDisplay ? item.projectCapitalDisplay + "亿" : "-" }}
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full text-center mt-10px">
              <el-button size="small"
                         v-if="data.greenBondProjects && data.greenBondProjects.length > 2"
                         @click="isOpenMoreInvestments = !isOpenMoreInvestments">
                {{ isOpenMoreInvestments ? '收缩' : '展开更多' }}
                <vc-icon icon="vi-arrow-down" color="#1382EF"
                         :class="[isOpenMoreInvestments ? 'rotate-180' : '']"/>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <vc-nodata v-if="error" :type="104"/>
  </div>
</template>
<script lang="ts" setup>
import {useNamespace} from "vc/src/use";
import {getGreenBondDetail} from "@/views/modules/greenBond/apis";
import {useTable} from './useTable';
import Descriptions from '../components/descriptions.vue';
import * as echarts from 'echarts';
import {toProjectDetail} from '@/utils/router';
const chartRef = ref();
const isOpenMoreInvestments = ref(false);
const option = {
  tooltip: {
    trigger: "item",
    formatter: function (param) {
      let item = param.data;
      var html = `<div style="width:300px;white-space:initial;"><div >投资项目：${item.name}</div>
                    <div>投资金额：${item.value}亿</div>
                    <div>占比：${item.rate}</div></div>`;
      return html;
    },
    position: function (point, params, dom, rect, size) {
      //  size为当前窗口大小
      if (size.viewSize[0] / 2 >= point[0]) {
        //其中point为当前鼠标的位置,在左侧
        return [point[0], point[1]];
      } else {
        //其中point为当前鼠标的位置
        return [point[0] - size.viewSize[0] / 2, point[1]];
      }
    },
  },
  color: ["#3986FE", "#F26279", "#F9D237", "#35CACA"],
  series: [
    {
      type: "pie",
      radius: ["50%", "70%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        // position: 'center'
      },
      hoverAnimation: false,
      emphasis: {
        label: {
          show: false,
          fontSize: "12",
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      width: 150,
      center: ["50%", "50%"],
      data: [],
    },
  ],
}
const ns = /* hoist-static*/ useNamespace('green-bond-detail');
defineOptions({name: ns.b()});
const route = useRoute();
const id: any = route.params.id;
const {infos} = useTable()
const showTable = ref(false);
let greenBondProjectShow = $ref();


const {data, loading, error} = useRequest(getGreenBondDetail, {
  defaultParams: [{id}],
  onSuccess(res) {
    showTable.value = true
    setTimeout(() => {

      //处理投资项目
      if (
        res.greenBondProjects &&
        res.greenBondProjects.length > 2
      ) {
        greenBondProjectShow = res.greenBondProjects.slice(0, 2);
      } else {
        greenBondProjectShow = res.greenBondProjects;
      }

      //饼图数据
      if (
        res.projectFundRateList &&
        res.projectFundRateList.length > 0
      ) {
        let chart1 = echarts.init(chartRef.value);
        let pieData: any = [];
        res.projectFundRateList.forEach((item) => {
          pieData.push({
            value: item.amountForProjectDisplay,
            name: item.projectName,
            rate: item.rate,
          });
        });
        let myOption = Object.assign({}, option);
        myOption.series[0].data = pieData;
        chart1.setOption(myOption);
      }
    }, 500)
  }
})
watch(isOpenMoreInvestments, (newValue) => {
  if (newValue) {
    greenBondProjectShow = data.value.greenBondProjects;
  } else {
    greenBondProjectShow = data.value.greenBondProjects.slice(0, 2);
  }
})

</script>
<style lang="scss" scoped>
:deep(.vc-nodata__img) {
  margin-top: 260px !important;
  width: 183px !important;
  height: 128px !important;
}
:deep(.label-tag) {
  display: inline-block;
  box-sizing: border-box;
  border-radius: 2px;
  padding: 1px 7px;
  line-height: 14px;
  color: #5C84D2;
  position: relative;
  border: 1px solid #5C84D2;
  margin-left: 16px;
}

:deep(.vc-descriptions__cell) {
  font-size: 14px !important;
}

.vc-green-bond-detail {
  background: #eaeaea;
  height: 100%;

  .content-wrapper {
    background: #eaeaea;

  }

  .container {
    margin: 0 auto;
    width: 1000px;
    background: white;
    padding: 14px 24px;
    height: 100%;

    .name {
      .bondName {
        color: #111111;
        font-weight: 600;
      }

      .label {
        color: #ffffff;
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 2px;
        margin-left: 5px;
        white-space: nowrap;
        display: inline-block;
        margin-bottom: 4px;
        line-height: 14px;

        &.green {
          background-color: #35CACA;
        }

        &.outdate {
          background-color: #FB9196;

        }
      }
    }

    .section {
      margin-top: 20px;

      .title {
        font-weight: bold;
        color: #000000;
        position: relative;
        padding-left: 16px;
        margin-bottom: 10px;

        &::before {
          content: "";
          position: absolute;
          width: 4px;
          height: 18px;
          left: -1px;
          top: 2px;
          background: #15b4f1;
        }
      }
    }

    .section2 {
      .main {
        display: flex;
        justify-content: center;
        align-items: center;

        .chart {
          width: 200px;
          height: 200px;
        }

        .dataDescItem {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          line-height: 22px;
          .label {
            color: #8B8C8C;
          }

          .value {
            color: #111111;
            flex-shrink: 0;
            margin-left: 20px;
          }
        }
      }
    }

    .section3 {
      .investmentList {
        padding-bottom: .3rem;

        .investmentListItem {
          border-bottom: 1px solid #e5e5e5;

          &:last-child {
            border-bottom: 0;
          }

          .name {
            color: #111111;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            padding-top: 10px;
            cursor: pointer;
            font-weight: 600;

            .value {
              padding-right: 10px;
            }

            .right {
              flex-shrink: 0;
              position: relative;

              &::after {
                content: '';
                background-image: url(../../../../assets/right.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                width: 6px;
                height: 12px;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
              }
            }
          }

          .flex {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;

            .label {
              color: #8B8C8C;
            }

            .value {
              color: #111111;
            }
          }

          &:first-child {
            .name {
              padding-top: 0;
            }
          }
        }
      }
    }
  }
}
</style>
